<template>
    <el-form ref="activityRefForm" :model="activityQuery" label-width="100px" :rules="activityRules">
        <el-form-item label="负责人:" prop="ownId">
            <el-select v-model="activityQuery.ownerId" placeholder="请选择" clearable @click="loadOwner()">
                <el-option
                    v-for="item in owners"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                />
            </el-select>
        </el-form-item>
        <el-form-item label="活动名称:" prop="name">
            <el-input v-model="activityQuery.name"/>
        </el-form-item>
        <el-form-item label="开始时间:" prop="startTime">
            <el-date-picker
                v-model="activityQuery.startTime"
                type="datetime"
                placeholder="请选择开始时间"
                value-format="YYYY-MM-DD HH:mm:ss"
                style="width: 100%;"
            />
        </el-form-item>
        <el-form-item label="结束时间:" prop="endTime">
            <el-date-picker
                v-model="activityQuery.endTime"
                type="datetime"
                placeholder="请选择创建时间"
                value-format="YYYY-MM-DD HH:mm:ss"
                style="width: 100%;"
            />
        </el-form-item>
        <el-form-item label="活动预算:" prop="cost">
            <el-input v-model="activityQuery.cost"/>
        </el-form-item>
        <el-form-item label="活动描述:" prop="description">
            <el-input
                v-model="activityQuery.description"
                :rows="6"
                type="textarea"
                placeholder="请输入活动描述"
            />
        </el-form-item>
        <div class="parent">
            <el-form-item class="child">
                <el-button type="primary" @click="submit()">提交</el-button>
                <el-button @click="goBack()">返回</el-button>
            </el-form-item>
        </div>
    </el-form>
</template>

<script>
import { doGet, doPost, doPut } from '../http/httpRequest.js';
import { messageTip,goBack } from '../util/util.js';
export default {
    name : "activityRecordView",
    inject : ['reload'],
    data(){
        return {
            owners : [],
            activityQuery : {},
            activityRules : {
                ownerId : [
                    { required: true, message: '请选择负责人', trigger: 'blur' }
                ],
                name : [
                    { required: true, message: '请输入活动名称', trigger: 'blur' }
                ],
                startTime : [
                    { required: true, message: '请选择开始时间', trigger: 'blur' }
                ],
                endTime : [
                    { required: true, message: '请选择结束时间', trigger: 'blur' }
                ],
                cost : [
                    { required: true, message: '请输入活动预算', trigger: 'blur' },
                    { pattern : /^[0-9]+(\.[0-9]{2})?$/, message: '活动预算必须是整数或者两位小数', trigger: 'blur' }
                ],
                description : [
                    { required: true, message: '请输入活动描述', trigger: 'blur' },
                    { min: 5, max: 255, message: '活动描述长度为5-255字符', trigger: 'blur' }
                ]
            }
        }
    },
    mounted(){
        this.loadOwner();
        this.loadActivity();
    },
    methods : {
        loadActivity(){
            let id = this.$route.params.id;
            if(id){
                doGet("/api/activity/"+id,{}).then(resp => {
                if(resp.data.code === 200){
                  this.activityQuery = resp.data.data;
                }
                else{
                  messageTip("网络错误","error");
                }
                });
            }
        },
        loadOwner(){
          doGet("/api/user/activityOwner",{}).then(resp => {
                if(resp.data.code === 200){
                  this.owners = resp.data.data;
                }
                else{
                  messageTip("网络错误","error");
                }
            });
        },
        goBack,
        submit(){
            this.$refs.activityRefForm.validate((isValid) => {
                if(isValid){
                    let formData = new FormData();
                    for( let field in this.activityQuery){
                        if(this.activityQuery[field]){
                            formData.append(field,this.activityQuery[field]);
                        }
                    }
                    if(this.activityQuery.id > 0){
                        doPut("/api/activity/edit",formData).then(resp => {
                            if(resp.data.code === 200){
                                messageTip("提交成功","success");
                                this.$router.back();
                            }
                            else{
                                messageTip("提交失败","error");
                            }
                        });
                    }
                    else{
                        doPost("/api/activity/add",formData).then(resp => {
                            if(resp.data.code === 200){
                                messageTip("提交成功","success");
                                this.$router.back();
                            }
                            else{
                                messageTip("提交失败","error");
                            }
                        });
                    }
                }
            });
        }
    }
}
</script>

<style scoped>
.width{
    width: 100%;
}
</style>